<template>
  <div>
    <div>
      <h5>{{ title }}</h5>
      <p class="pone">{{ desc }}</p>
      <p class="ptwo"><span class="money">￥</span>{{ showPrice }}</p>
      <van-tabs type="none">
        <van-tab v-for="(item, index) in arr" :key="index">
          <template #title>
            <div style="text-align: center">
              <van-icon name="hot-o" />
              <p class="pthree">{{ item.name }}</p>
              <p class="pfour">{{ item.value }}</p>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "VantLinelist",

  data() {
    return {};
  },

  mounted() {},
  props: {
    arr: {
      type: Array,
    },
    desc: {
      type: String,
    },
    title: {
      type: String,
    },
    showPrice: {
      type: String,
    },
  },
  methods: {},
};
</script>

<style scoped>
.pone {
  color: #aaa;
}
.ptwo {
  color: orange;
  font-weight: bold;
}
.van-tab {
  width: 200px !important;
}
/* .van-tabs {
  width: 100px !important;
} */
.van-icon {
  font-size: 18px;
}
.pthree {
  font-size: 16px;
}
.pfour {
  font-size: 12px;
  color: #aaa;
}
.money {
  font-size: 12px;
}
</style>